// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

import KLineItem from "../items/KLineItem";
import TrendBaseComponent from "./TrendBaseComponent";
import VolumeTrendComponent from "./VolumeTrendComponent";

const {ccclass, property} = cc._decorator;

@ccclass
export default class KLineTrendComponent extends TrendBaseComponent {

    @property(cc.Prefab)
    klineItemPrefab: cc.Prefab = null;

    @property(cc.Prefab)
    volumePrefab: cc.Prefab = null;
    
    @property(cc.Graphics)
    graphic: cc.Graphics = null;

    @property(cc.Node)
    volumeLayer: cc.Node = null;

    @property(cc.Node)
    trendLayer: cc.Node = null;

    _volumeView: VolumeTrendComponent = null;

    _itemArray: any = [];

    onLoad () {
        let node = cc.instantiate(this.volumePrefab);
        this.volumeLayer.addChild(node);
        this._volumeView = node.getComponent(VolumeTrendComponent);
    }

    clearData () {
        this._volumeView.clearData();
        for (let index = 0; index < this._itemArray.length; index++) {
            const item = this._itemArray[index];
            item.node.opacity = 0;
        }
    }

    setData (data, nodeWidth, cell, key = '') {
        this.clearData();
        let nodeHeight = this.node.height - 160;
        let list = data.list;
        let maxHigh = 0;
        let maxLow = list[0].low;
        let averArray = [];
        for (let index = 0; index < list.length; index++) {
            const item = list[index];
            if (maxHigh < item['high' + key]) {
                maxHigh = item['high' + key];
            }
            if (maxLow > item['low' + key]) {
                maxLow = item['low' + key];
            }
            averArray.push(item['close' + key]);
        }

        let gridCount = 4;
        let calcHigh = Math.ceil(maxHigh / cell) * cell;
        let calcLow = Math.floor(maxLow / cell) * cell;
        let mid = (calcHigh + calcLow) / 2;
        let inv = Math.ceil((calcHigh - calcLow + cell) / cell / gridCount) * cell * gridCount;
        calcHigh = mid + inv / 2;
        calcLow = mid - inv / 2;

        let newCell = inv / gridCount;

        let rate = nodeHeight / (calcHigh - calcLow);
        let grids = [calcHigh,calcLow + 3 * newCell,calcLow + 2 * newCell, calcLow + newCell, calcLow];
        this.setGirdData(grids, calcLow, rate);

        this.drawAverage(averArray, calcLow, rate, nodeWidth);

        for (let index = 0; index < list.length; index++) {
            const dataItem = list[index];
            let x = index * nodeWidth + nodeWidth;
            let y = (dataItem['open' + key] - calcLow) * rate;
            let item: KLineItem = this._itemArray[index];
            if (item == null) {
                let newNode = cc.instantiate(this.klineItemPrefab);
                this.trendLayer.addChild(newNode);
                item = newNode.getComponent(KLineItem);
                this._itemArray[index] = item;
            }
            item.node.opacity = 255;
            item.node.x = x;
            item.node.y = y + 30;
            item.setItem(dataItem, rate, nodeWidth, key);
        }

        this._volumeView.setData(list, nodeWidth);
    }

    // update (dt) {}
}
